<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w2.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Example - Google North America Offices</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQcTQoRJ_JVFHVwderj38GcfiXt6hQX5E6h3W3sV-l-QbtgIls1pN0iAw"
            type="text/javascript"></script>
    <script src="js/google_northamerica_offices.js"></script>
    <script src="js/markermanager.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    var mgr;
    var icons = {};
    var allmarkers = [];

    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GOverviewMapControl());
        map.setCenter(new GLatLng(24.996016,113.59314), 9);
        map.enableDoubleClickZoom();
        var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
        mgr = new MarkerManager(map,mgrOptions);
        window.setTimeout(setupOfficeMarkers, 0);
      }
    }

	function getIcon2(image){
		var icon=null;
		if(image){
			if (icons[image]) {
	          icon = icons[image];
	        } else {
	        	icon = new GIcon();
	        	icon.image=image;
	        	var size = iconData[images[0]];
	          icon.iconSize = new GSize(size.width, size.height);
	          icon.iconAnchor = new GPoint(size.width >> 1, size.height >> 1);
	          
	          size = iconData[images[1]];
	          icon.shadowSize = new GSize(size.width, size.height);
	          icons[images[0]] = icon;
	        }
		}
	}
    function getIcon(images) {
      var icon = null;
      if (images) {
        if (icons[images[0]]) {
          icon = icons[images[0]];
        } else {
          icon = new GIcon();
          icon.image = "images/" 
              + images[0] + ".png";
          var size = iconData[images[0]];
          icon.iconSize = new GSize(size.width, size.height);
          icon.iconAnchor = new GPoint(size.width >> 1, size.height >> 1);
          icon.shadow = "images/" 
              + images[1] + ".png";
          size = iconData[images[1]];
          icon.shadowSize = new GSize(size.width, size.height);
          icons[images[0]] = icon;
        }
      }
      return icon;
    }

    function setupOfficeMarkers() {
    
    
    var point = new GLatLng(24.996016,113.59314);
		var str='';
		str+='<table>';
		str+='<tr>';
		str+='<td>';
		str+='<a href="http://www.baidu.com"><img src="http://www.baidu.com/img/logo-yy.gif"/></a>';
		str+='</td>';
		str+='</tr>';
		
		str+='';
		str+='</table>';
		var myicon=getIcon('http://www.baidu.com/img/logo-yy.gif');
		alert(myicon);
		var marker = createMarker(point,'this is test',myicon);
		alert('befor addMarker');
		mgr.addMarker(marker,9);
		alert('after addMarker');
		mgr.refresh();
		//return false;
      allmarkers.length = 0;
      for (var i in officeLayer) {
        var layer = officeLayer[i];
        var markers = [];
        for (var j in layer["places"]) {
          var place = layer["places"][j];
          var icon = getIcon(place["icon"]);
          //alert('icon='+icon);
          var title = place["name"];
          var posn = new GLatLng(place["posn"][0], place["posn"][1]);
          var marker = createMarker(posn,title,icon); 
          markers.push(marker);
          allmarkers.push(marker);
        }
        mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
      }
      mgr.refresh();
    }
  
    function createMarker(posn, title, icon) {
      var marker = new GMarker(posn, {title: title, icon: icon, draggable:true });
      GEvent.addListener(marker, 'dblclick', function() { mgr.removeMarker(marker) } ); 
      return marker;
    }

    function deleteMarker() {
      var markerNum = parseInt(document.getElementById("markerNum").value);
      mgr.removeMarker(allmarkers[markerNum]);
    }
   
    function clearMarkers() {
      mgr.clearMarkers();
    }
   
    function reloadMarkers() {
      setupOfficeMarkers();
    }
    function createMarker3(point, imageName,html) {
          
		  baseIcon1 = new GIcon();
		  baseIcon1.shadow = "http://www.google.com/mapfiles/shadow50.png";
		  baseIcon1.iconSize = new GSize(38, 32);
		  baseIcon1.shadowSize = new GSize(37, 34);
		  baseIcon1.iconAnchor = new GPoint(9, 34);
		  baseIcon1.infoWindowAnchor = new GPoint(9, 2);
		  baseIcon1.infoShadowAnchor = new GPoint(18, 25);
          var letteredIcon = new GIcon(baseIcon1);
          letteredIcon.image = "images/"+imageName;
		  //alert(letteredIcon.image);
		  
          markerOptions = { icon:letteredIcon };
          var marker = new GMarker(point, markerOptions);

          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("<div class='ipt' id=popupWin>" + html + "</div>");
          });
          return marker;
        }
    //]]>
    </script>

  </head>
  <body onload="load()" onunload="GUnload()">
    <input type="button" onclick="deleteMarker()" value="delete marker #:" />
    &nbsp;
    <input type="text" id="markerNum" value="0" size="3"/>
    |
    <input type="button" onclick="clearMarkers()" value="clear all markers" />
    |
    <input type="button" onclick="reloadMarkers()" value="reload all markers" />

    <br/>
    <div id="map" style="width: 600px; height: 400px;"></div>
  </body>
</html>

